<template>
  <div>
    <div class="search-panel">
      <el-col :span="13">
        <label>日期范围：</label>
        <el-date-picker
          v-model="defaultDateRange"
          type="datetimerange"
          :picker-options="pickerOptions"
          placeholder="选择时间范围"
          align="left">
        </el-date-picker>
      </el-col>
      <el-col :span="3">
        <el-button type="primary" @click="search">查询</el-button>
      </el-col>
    </div>
    <div class="chart-container">
      <echarts :option="chartOption" width="800"></echarts>
    </div>
    <el-table
      :data="data"
      style="width: 100%">
      <el-table-column
        prop="datatypeName"
        label="类型">
      </el-table-column>
      <el-table-column
        prop="htime"
        label="时间">
      </el-table-column>
      <el-table-column
        prop="val"
        label="数据项值">
      </el-table-column>
    </el-table>
    <el-pagination
      layout="prev, pager, next"
      :total="502"
      @current-change="currentPageChange"
      >
    </el-pagination>
  </div>
</template>
<script>
import moment from 'moment'
import echarts from '../common/echarts'
import _ from 'lodash'

const DATE_FORMAT = 'YYYY-MM-DD HH:mm:ss'

export default {
  name: 'itemhistroydata',
  props: ['deviceId', 'itemId', 'itemName'],
  data () {
    return {
      defaultDateRange: [moment().add(-1, 'days').format(DATE_FORMAT), moment().format(DATE_FORMAT)],
      dateRange: [],
      pickerOptions: {
        shortcuts: [{
          text: '过去1小时',
          onClick (picker) {
            const start = moment().add(-1, 'hours').format(DATE_FORMAT)
            const end = moment().format(DATE_FORMAT)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '过去12小时',
          onClick (picker) {
            const start = moment().add(-12, 'hours').format(DATE_FORMAT)
            const end = moment().format(DATE_FORMAT)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '过去24小时',
          onClick (picker) {
            const start = moment().add(-24, 'hours').format(DATE_FORMAT)
            const end = moment().format(DATE_FORMAT)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '过去48小时',
          onClick (picker) {
            const start = moment().add(-48, 'hours').format(DATE_FORMAT)
            const end = moment().format(DATE_FORMAT)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '过去7天',
          onClick (picker) {
            const start = moment().add(-7, 'days').format(DATE_FORMAT)
            const end = moment().format(DATE_FORMAT)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      data: null,
      allData: null,
      chartOption: {},
      total: null,
      currentPage: 1
    }
  },
  mounted: function () {
    this.dateRange = this.formatTime()
    this.requestData()
  },
  watch: {
    defaultDateRange () {
      this.dateRange = this.formatTime()
    },
    deviceId: 'requestData',
    itemId: 'requestData',
    itemName: 'requestData',
    currentPage: 'getTableData'
  },
  methods: {
    currentPageChange (currentPage) {
      this.currentPage = currentPage
    },
    requestData () {
      if (!this.deviceId || !this.itemId || !this.itemName) {
        return
      }
      this.$http.get('/data/history/dataitem/?device_id=' + this.deviceId + '&dataitem_id=' + this.itemId + '&start_time=' + this.dateRange[0] + '&end_time=' + this.dateRange[1]).then((res) => {
        this.allData = res.data.historyDataList
        this.total = this.allData.length
        this.getTableData()
        this.renderOption()
      })
    },
    getTableData () {
      this.data = this.allData.slice((this.currentPage - 1) * 10, (this.currentPage - 1) * 10 + 9)
    },
    formatTime () {
      return this.defaultDateRange.map((item) => {
        return moment(item).toDate().getTime()
      })
    },
    search () {
      this.requestData()
    },
    renderOption () {
      var seriesData = _.chain(this.data).map((item) => {
        return {
          name: moment(item.htime).format(DATE_FORMAT),
          value: item.val
        }
      }).sortBy('name').value()
      this.chartOption = {
        title: {
          text: '数据项' + this.itemName
        },
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category'
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          name: '数值',
          type: 'line',
          data: seriesData
        }]
      }
    }
  },
  components: {
    echarts
  }
}
</script>
<style lang="stylus" scoped>
.search-panel {
  border: 1px solid #ccc
  height: 100px
  line-height: 100px;
  margin: 20px;
  padding: 0 20px;
}
.el-col {
  display: inline-block;
}
.el-input {
  display: inline-block;
  width: 380px;
}
.chart-container {
  padding: 20px;
}
</style>
